<template>
    <div class="index">
        <el-container>
            <el-aside>
                <el-menu :collapse="data.isCollapse" active-text-color="#409eff" background-color="#2d3a4b"
                    class="el-menu-vertical-demo" default-active="2" text-color="#fff" router>
                    <el-menu-item index="/home">
                        <el-icon>
                            <location />
                        </el-icon>
                        <span>首页</span>
                    </el-menu-item>
                    <el-sub-menu index="1">
                        <template #title>
                            <el-icon>
                                <location />
                            </el-icon>
                            <span>工厂设置</span>
                        </template>
                        <el-menu-item>商户信息</el-menu-item>
                        <el-menu-item>推广用户</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="2">
                        <template #title>
                            <el-icon>
                                <location />
                            </el-icon>
                            <span>系统设置</span>
                        </template>
                        <el-menu-item index="/banner">Banner管理</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="3">
                        <template #title>
                            <el-icon>
                                <location />
                            </el-icon>
                            <span>文章设置</span>
                        </template>
                        <el-menu-item index="/cate">文章分类</el-menu-item>
                        <el-menu-item index="/article">文章管理</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="4">
                        <template #title>
                            <el-icon>
                                <location />
                            </el-icon>
                            <span>商城设置</span>
                        </template>
                        <el-menu-item index="/product">商品分类</el-menu-item>
                        <el-menu-item index="/merchant">商品管理</el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </el-aside>
            <el-container>
                <el-header>
                    <div style="display:flex;align-items:center;">
                        <div style="width:20px;height:20px;">
                            <el-icon size="20px" @click="data.isCollapse=!data.isCollapse" v-show="data.isCollapse">
                                <Expand />
                            </el-icon>
                            <el-icon size="20px" @click="data.isCollapse=!data.isCollapse" v-show="!data.isCollapse">
                                <Fold />
                            </el-icon>
                        </div>
                        <el-breadcrumb separator="/">
                            <el-breadcrumb-item v-for="item in $route.matched" :key="item.path"
                                :to="{ path: item.path }">{{item.name}}</el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                    <el-dropdown>
                        <span class="el-dropdown-link">
                            {{data.userInfo.realName}}({{data.userInfo.mobile}})
                            <el-icon class="el-icon--right">
                                <arrow-down />
                            </el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>首页</el-dropdown-item>
                                <el-dropdown-item>修改密码</el-dropdown-item>
                                <el-dropdown-item style="color:red;">切换账号</el-dropdown-item>
                                <el-dropdown-item divided @click="out">退出</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </el-header>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import { reactive } from "vue"
import { Expand, Fold, ArrowDown } from "@element-plus/icons-vue";
import { onMounted } from "@vue/runtime-core";
import { userInfo } from "../api/index"

import { useRouter } from "vue-router"
const router = useRouter()
const data = reactive({
    isCollapse: false,
    userInfo: ''
})

// 退出登录
function out(){
    localStorage.removeItem("token")
    router.push("/login")
}



onMounted(() => {
    userInfo().then(res => {
        // console.log(res)
        if(res.code === 0){
            data.userInfo = res.data
        }
    })
})



</script>

<style lang="scss" scoped>
.index {
    height: 100vh;
    width: 100vm;

    .el-menu {
        border-right: none;
    }

    .el-aside {
        width: auto;

        li.el-sub-menu {
            width: 200px;
        }

        .el-menu--collapse li.el-sub-menu {
            width: auto;
        }
    }

    .el-container {
        .el-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    }

}
</style>


<style>
.el-header,
.el-footer {
    background-color: #b3c0d1;
    color: #333;
}

.el-aside {
    background-color: #2d3a4b;
    color: #333;
}

.el-main {
    background-color: #e9eef3;
    color: #333;
}

.index .el-container {
    height: 100%;
}

.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}
</style>
  